<template>
  <div class="patrolTypes-root">
    <formTitleVue
      title="报警统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <div class="select-ul">
      <el-cascader v-model="nowCascader" :options="cascader_options" @change="changeCascader"></el-cascader>
    </div>
    <!-- <div id="echarts-types"></div> -->
    <div class="charts-ul">
      <myPie class="charts-li" domId="monitorInfoManagement-monitorStatistical-echarts" height="40vh" :chartsData="chartsData" :myOption="echartsOption"/>
      <myBar class="charts-li" domId="monitorInfoManagement-monitorStatistical2-echarts" height="40vh" :chartsData="chartsData2" :myOption="echartsOption2"/>
    </div>
    <!-- <myPieRing domId="patrol-patrolTypes-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/> -->
  </div>
</template>

<script>
import formTitleVue from "@/components/FormTitle/formTitle.vue";
import myPie from '@/components/Echarts/myPie.vue';
import myBar from '@/components/Echarts/myBar.vue';
import { time_select_optios } from '@/utils/global.js';
import { api_alarmStatistics,api_alarmCityVersionColumnar,api_cascader } from '@/api/jcfx/jcsjtj.js'

export default {
  name: "patrolTypes",
  components: {
    formTitleVue,myPie,myBar,
  },
  data() {
    return {
      selectOptions: [
        {
          selectValue: "本日",
          options:[
            { label: "本日", value: "本日" },
            { label: "本月", value: "本月" },
            { label: "本季度", value: "本季度" },
            { label: "本年", value: "本年" },
          ]
        }
      ],
      chartsData: {
        yData: [],
      },
      echartsOption:{
        legend:{
          show:false,
        }
      },
      chartsData2: {
        xData: [],
        yData: [],
      },
      echartsOption2:{
        yAxis: {
          minInterval: 1,
        },
      },
      searChForm: {
        startTime: '',
        endTime: '',
        bModeType: '',
        modeType: '',
        areaCode: this.$store.state.account.user.deptIds,
      },
      cascader_options: [],
      nowCascader: [''],
    };
  },
  methods: {
    selectChange(item) {
      // console.log(item);
      let time_select = time_select_optios[item]||{}
      this.searChForm.startTime = time_select.startTime||''
      this.searChForm.endTime = time_select.endTime||''
      this.getData()
    },
    getData(){
      api_alarmStatistics(this.searChForm).then(res => {
        // console.log(res)
        let data = res.data
        let report = data.report
        this.chartsData.yData = report
        this.chartsData.yData.forEach(item => {
            item.labelLine = {
              normal:{
                show: true, //引导线
              }
            }
            item.label = {
              normal:{
                show: true,
                formatter:function(e){
                  let data=e.data;
                  if(data.value==0){
                    // 无数据时去掉引导线和文字
                    data.labelLine.show=false;
                    data.label.show=false;
                  }else{
                    return data.name
                  }
                },    
              }
            }
        })
      })
      api_alarmCityVersionColumnar(this.searChForm).then(res => {
        // console.log(res)
        let data = res.data
        this.chartsData2.xData = data.xAxle
        data.data.forEach(item => {
          item.data = item.report
        });
        this.chartsData2.yData = data.data
      })
    },
    // 获取级联数据下拉框
    async getCascader(){
      await api_cascader({type:'twoType'}).then(res => {
        // console.log(res)
        this.cascader_options = res.data
        return Promise.resolve()
      })
    },
    // 级联选择
    changeCascader(val){
      // console.log(val)
      this.searChForm.bModeType = val[0]||''
      this.searChForm.modeType = val[1]||''
      this.getData()
    }
  },
  async mounted() {
    await this.getCascader()
    this.selectChange(this.selectOptions[0].selectValue)
  },
};
</script>

<style lang="scss" scoped>
.patrolTypes-root {
  position: relative;
  #echarts-types {
    height: 30vh;
  }
  .select-ul{
    position: absolute;
    top: 0;
    right: 132px;
    z-index: 10;
  }
  .charts-ul{
    display: flex;
    justify-content: space-between;
    .charts-li{
      width: 42%;
    }
  }
}
::v-deep .el-cascader{
  line-height: initial;
}
</style>
